<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="shortcut icon" href="2.ico">
		<style type="text/css">
			*{
				padding: 0px;
				margin: 0px;
			}
			#fk{
				width: 1200px;
				height: 49px;
				border: 1px solid gainsboro;
				margin: 10px auto;
				
			}
			#fk p.left{
				width: 260px;
				height: 49px;
				background: #B81C22;
				color: white;
				line-height: 49px;
				font-size: 17px;
				font-family: "微软雅黑";
				text-align: center;
				float: left;
			}
			#fk .right{
			width: 940px;
			height: 49px;
			/*background: #EFEFEF;*/
			float: left;	
			}
			#fk .right a{
				display: block;
				width: 114px;
				height: 49px;
				float: left;
				line-height: 49px;
				font-family: "微软雅黑";
				font-size: 16px;
				color: #727171;
				text-decoration: none;
				text-align: center;
				
				
			}
			#fk .right a:hover{
				background: #E5E6E6;
				color: #B81C22;
			}
			/**{
				padding: 0;
				margin: 0;*/
			}
			#top{
				width: 100%;
				height: 32px;
				background: #666;
			}
			#top .center{
				width: 1200;
				height: 32px;
				/*background: forestgreen;*/
				margin: 0 2;
			}
			#search{
				width: 1200px;
				height: 92px;
				/*background: #B81B22;*/
				margin: 0 auto;
			}
			
			/*flash开始*/
			#flash{
				width: 1200px;
				height: 474px;
				border: 3px solid gainsboro;
				margin: 0 auto;
			}
			
			#flash .left{
				width: 260px;
				height: 475px;
				/*background: blueviolet;*/
				float: left;
				
			}
			#flash .center{
				float: left;
				margin-left: 10px;
				margin-right: 10px;
				float: left;
				}
			#flash .right{
					width: 210px;
					height: 475px;
					/*background: yellowgreen;*/
					float: left;
				}
			
			#flash .lest #fk1{
				width: 260px;
				height: 474px;
				border-bottom: 1px solid green;
				border-right: 1px solid green;
				margin: 30px;
				position: relative;
				float: left;
			
				
			}
			
			/*男装样式开始*/
			#flash .left #fk1 #man{
				width: 258px;
				height: 257px;
				border: 1px solid gainsboro;
				position: relative;
				
			}
			#flash .left #fk1 #man .title{
				color: #B81C22;
				font-size: 14px;
				position: absolute;
				left: 35px;
				top: -8px;
				background: white;
				padding: 0 4px;
				
			}
			#flash .left #fk1 #man .one{
				width: 258px;
				height: 71px;
				border-bottom: 1px solid gainsboro;
				position: relative;
			}
			#flash .left #fk1 #man .one .t{
				font-size: 14px;
				color: #A3A2A2;
				text-decoration: none;
				font-family: "微软雅黑";
				line-height: 20px;
				position: absolute;
				left: 36px;
				top: 20px;
				
			}
			#flash .left #fk1 #man .one p.tags{
			position: absolute;
			left: 36px;
			top: 43px;	
			}
			#flash .left #fk1 #man .one p.tags a{
				text-decoration: none;
				font-size: 12px;
				color: #727171;
				float: left;
				line-height: 20px;
				margin-right: 17px;
			}
			#flash .left #fk1 #man .one p.tags a.index{
				color: #B81C22;
			}
			/*男装结束*/
			
			/*女装样式开始*/
			#flash .left #fk1 #man11{
				width: 258px;
				height: 257px;
				border: 1px solid gainsboro;
				position: relative;
				
			}
			#flash .left #fk1 #man11 .title11{
				color: #B81C22;
				font-size: 14px;
				position: absolute;
				left: 35px;
				top: -8px;
				background: white;
				padding: 0 4px;
				
			}
			#flash .left #fk1 #man11 .one11{
				width: 258px;
				height: 71px;
				border-bottom: 1px solid gainsborod;
				position: relative;
			}
			#flash .left #fk1 #man11 .one11 .t11{
				font-size: 14px;
				color: #A3A2A2;
				text-decoration: none;
				font-family: "微软雅黑";
				line-height: 20px;
				position: absolute;
				left: 36px;
				top: 20px;
				
			}
			#flash .left #fk1 #man11 .one11 p.tags11{
			position: absolute;
			left: 36px;
			top: 43px;	
			}
			#flash .left #fk1 #man11 .one11 p.tags11 a{
				text-decoration: none;
				font-size: 12px;
				color: #727171;
				float: left;
				line-height: 20px;
				margin-right: 17px;
			}
			#flash .left #fk1 #man11 .one11 p.tags11 a.index11{
				color: #B81C22;
			}
			/*女装结束*/
			
	#xt{
		width: 1200px;
		/*height: 1200px;*/
		border: 1px solid white;
		margin: 0 auto;
	}
	#ct{
		width: 1200px;
		/*height: 1200px;*/
		border: 1px solid white;
		margin: 0 auto;
	}
	
	.xt5{
		text-align: right;
		margin: 0 auto;
	}
	#xt .xt1{
		padding-left: 0px;
	}
	#xt img {
		
		width: 236px!important;
	}
	/*以下为搜索区域*/
	#search{
		width: 1200px;
		height: 93;
		border: 1px solid white;
		margin: 0px auto;
		position: relative;
	} 
	#search a.logo{
		width: 166px;
		height: 47px;
		display: block;
		background: url(fanke.png) no-repeat 0px -59px;
		position: absolute;
		left 33px;
		top 20px;
	}
	#search form{
		width: 437px;
		height: 27px;
		border: 1px solid #C9CACA;
		position: absolute;
		left: 642px;
		top: 28px;
		
	}
	#search form .keyword{
		width: 389px;
		height: 27px;
		/*取消所有边框*/
		border: none;
		border-right: 1px solid #C9CACA;
		color: #000;
		font-size: 12px;
		text-indent: 5px;
		float: left;
		}
		#search form .sub{
		width: 47px;
		height: 27px;
		background: #B81C20;
		border: none;
		color: white;
		font-size: 13px;
		float: left;	
		}
		#search p.tags{
		position: absolute;
		top: 62px;
		left: 694px;	
		}
		
		#search p.tags span{
			font-size: 12px;
			color: #727171;
			float: left;
			line-height: 20px;
			margin-right: 5px;
			
		}
		#search p.tags a{
			font-size: 12px;
			color: #727171;
			text-decoration: none;
			float: left;
			line-height: 20px;
			margin-right: 11px;
		}
		#search p.tags a:hover{
			color: #B81C22;
			text-decoration: underline;
			
		}
		#search a.cart{
			display: block;
			height: 29px;
			width: 107px;
			border: 1px solid green;
			position: absolute;
			right: 0;
			top: 28px;
			background: url(fanke.png) no-repeat -153px 0;
			color: white;
			font-size: 12px;
			line-height: 29px;
			text-decoration: none;
			text-indent: 30px;
			
		}
		/*以下为搜索区域结束*/
		
		
		/*动画样式开始*/
		#fkdh{
				width: 710px;
				height: 475px;
				border: 2px solid gainsboro;
				/*margin: 10px auto;*/
				position: relative;
				float: left;
			}
			#fkdh img{
				position: absolute;
				top: 0;
				left: 0;
				display: none;
				
			}
			#fkdh ul{
				height: 10px;
				position: absolute;
				bottom: 35px;
				left: 320px;
				
			}
			#fkdh ul li{
				list-style: none;
				width: 10px;
				height: 10px;
				float: left;
				background: #1E1E1E;
				margin-right: 8px;
				border-radius: 50%;
			}
			
			/*下面样式开始*/
			#xiamian{
				width: 1200px;
				height: 172px;
				border: 2px solid gainsboro;
				margin: 0px auto;
				padding-top: 28px;
			
				}
			#xiamian .xil{
				width: 138px;
					float: left;
					list-style: none;
					padding-left: 60px;
					border-right: 1px solid gainsboro;
					font-size: 12px;
					color: #3E3A39;
					font-family: "Microsoft YaHei";
				}
				#xiamian .xil p{
					margin-bottom: 20px;
					font-size: 14px;
					}
				#xiamian .xil li{
					list-style: none;
					line-height: 22px;
					}
					.xian{
						width: 100%;
						border-bottom: 1px solid black;
						margin-top: 10px;
						
						}
						/*背景精灵一开始*/
					#tpjl{
							width: 1200px;
							height: 80px;
							margin: auto;
							}
					#tpjl .li{
						width: 25%;
						height: 30px;
						float: left;
						margin-top: 30px;
						
					}
					#tpjl .l1{
						background: url(img/123.png) no-repeat 60px -128px;
						}
					#tpjl .l2{
						background: url(img/123.png) no-repeat 60px -170px;
						}
					#tpjl .l3{
						background: url(img/123.png) no-repeat 60px -212px;
						}
					#tpjl .l4{
						background: url(img/123.png) no-repeat 60px -212px;
						}
						/*背景精灵一结束*/
					#xzz{
						width: 1200px;
					     height: 20px;
					     margin: 0 auto;
					     margin-top: 5px;
						}	
					#xzz p{
					font-family: "微软雅黑";
					font-size: 10px;
					text-align: center;	
					line-height: 20px;
					}
					#xiaotudiv{
						width: 1200px;
						height: 80px;
						margin: 0px auto;
						/*line-height: 20px;*/
						 margin-top: 10px;
						 position:relative;
						 top: 0px;
						 left:0px;
						 
						 
						
						
						
					}
					#xiaotudiv .xiaotu{
						margin-right: 20px;
						float: left;
						/*width: 113px;*/
						height: 43px;
						/*position: absolute;
						top:10px;
						left:30px ;*/
						/*border: 1px solid black;*/
					}
					
					#xiaotudiv .x1{
						width: 113px;
						position: absolute;
						top:10px ;
						left:230px;
						float: right;
						background: url(img/222.png) no-repeat 0px -585px;
					}
					#xiaotudiv .x2{
						background: url(img/222.png) no-repeat 0px -630px;
						width: 152px;
						position: absolute;
						top:10px ;
						left:370px;
						float: right;
					}
					#xiaotudiv .x3{
						position: absolute;
						top:10px ;
						right:400px;
						float: right;
						background: url(img/222.png) no-repeat 0px -675px;
						width: 246px;
					}
					#xiaotudiv .x4{
						width: 25px;
						height: 45px;
						position: absolute;
						top:10px ;
						right: 350px;
						float: left;
					}
					#xiaotudiv .x4 img{
						width: 120px;
						height: 39px;
						float: left;
					}
					#top{
						width: 1200px;
						height: 20px;
						margin: 0 auto;
						border: 1px solid white;
						
						
					}
					#top .top1{
						font-size: 10px;
						font-family: 宋体;
						/*position: absolute;
						top:10px ;
						left: 40px;*/
						text-align: center;	
						letter-spacing: 2.5px;
						}		
		</style>
		<!--/*动画样式结束*/-->
		
		<!--动画开始jquery-->
		<script src="jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$(function(){
//		总管变量
	var c = 0;
	function run(){
		c++;
		c=(c==4)?0:c;
//		三元表达式
//让c号对应的图片显示，其他的隐藏
    $("#fkdh img").eq(c).fadeIn(500).siblings('img').stop().fadeOut(500);
//让c号lif变红，其他的变黑
	$('#fkdh ul li').eq(c).css({'background':'#A10000'}).siblings('li').css({'background':'#1e1e1e'});


	}
//	设置定时器，自动轮播
	timer = setInterval(run,1000);
//		$(this)在事件中指向的是事件源，在定时器里，指向的是定时器
//		鼠标移入效果	
        $("#fkdh ul li").mouseover(function(){
    	clearInterval(timer);
    	var _this=$(this);
    	tt=setTimeout(function(){
//  		清理定时器
        c=_this.index();
//      让c号对应的图片显示，其他的隐藏
    	

	$("#fkdh img").eq(c).fadeIn(500).siblings('img').stop().fadeOut(500);
	//		让c号li变红，其他的变黑
//	三元表达式让c号对应的图片显示，其他的隐藏
$("#fkdh ul li").eq(c).css({'background':'#A10000'}).siblings('li').css({'background':'#1e1e1e'});
	},50)
    	})
//  	给li加鼠标移出事件
    $("#fkdh ul li").mouseout(function(){
//  	恢复定时器
    clearTimeout(tt);
    timer=setInterval(run,1000);
    })
    	})


		</script>
		<!--动画结束jquery-->
		
	</head>
	<body>
		<div id="top">
			
			<span class="top1">您好,欢迎光临凡客诚信! 登录 | 注册我的订单收藏本站双十二退换货说明我的凡客帮助中心网站公告手机凡客在线客服 赵永军的作业 做的不好，请大家仔细观察。联系电话：13384778050</span>
		</div>
		
		
		<div id="ct">
			<img src="ct.jpg" class=""/>
		</div>
			
		
		
		<div di="top">
			<div class="center">
				
				
			</div>
			<!--以下为凡客搜索区域-->
			<div id="search">
			   <a href="" class="logo"></a>
		        <form action="">
			      <input type="text" class="keyword"   value="搜“针织衫”，体验与众不同"/>
		          <input type="text" class="sub" value="搜索"/>
		        </form>	
		        <p class='tags'>
		        	<span>热门搜索：</span>
		        	<a href="">衬衫</a>
		        	<a href="">羽绒服</a>
		        	<a href="">针织衫</a>
		        	<a href="">羊毛外套</a>
		        	<a href="">休闲裤</a>
		        	<a href="">牛仔裤</a>
		        </p>
		        
		        <a href="" class='cart'>购物车</a>
		        
			</div>
			<!--凡客搜索区域结束-->
		</div>
		
		<div id="fk">
			<p class="left">全部商品分类</p>
			<div class="right">
				<a href="">nautilus</a>
				<a href="">羽绒服</a>
				<a href="">衬衫</a>
				<a href="">外套</a>
				<a href="">针织衫</a>
				<a href="">休闲裤</a>
				<a href="">牛仔</a>
				<a href="">断码区</a>
			</div>
		</div>
		<!--flash开始-->
		<div id="flash">
			<div class="left">
		       <div id="fk1">
		       	
		       	<!--男装开始-->
			     <div id="man">
				   <p class="title">男装</p>
				   
				     <div class="one">
					    <a href="" class="t">衬衫</a>
					    <p class="tags">
						<a href="" class="index">针织衫</a>
						<a href="">羊毛衫</a>      
						<a href="">羊绒衫</a>
						<a href="">棉线衫</a>
					 </p>
				     </div>
				
				     <div class="one">
					    <a href="" class="t">针织衫</a>
					      <p class="tags">
						  <a href="" class="index">羊毛衫 </a>     
						  <a href="">羊绒衫</a>
						  <a href="">棉线衫</a>
						  <a href="">牛津纺</a>
					      </p>
				     </div>
				
				     <div class="one">
					    <a href="" class="t">外套</a>
					      <p class="tags">
						  <a href="" class="index">羽绒服</a>
						  <a href="">冲锋衣</a>
						  <a href="">羊毛外套</a>
						  <a href="">卫衣</a>
       
					      </p>
				     </div>
				     
				      <!--男装结束-->
				      
				      <!--女装开始-->
				<div id="man11">
				   <p class="title11">女装</p>
				   
				     <div class="one11">
					    <a href="" class="t11">衬衫</a>
					    <p class="tags11">
						<a href="" class="index11">针织衫</a>
						<a href="">羊毛衫</a>      
						<a href="">羊绒衫</a>
						<a href="">棉线衫</a>
					 </p>
				     </div>
				
				     <div class="one11">
					    <a href="" class="t11">针织衫</a>
					      <p class="tags11">
						  <a href="" class="index11">羊毛衫 </a>     
						  <a href="">羊绒衫</a>
						  <a href="">棉线衫</a>
						  <a href="">牛津纺</a>
					      </p>
				     </div>
				
				     <div class="one11">
					    <a href="" class="t11">外套</a>
					      <p class="tags11">
						  <a href="" class="index11">羽绒服</a>
						  <a href="">冲锋衣</a>
						  <a href="">羊毛外套</a>
						  <a href="">卫衣</a>
       
					      </p>
				     </div>
				     
			     </div>
			<!--女装结束-->
				     
			     </div>
			     
		    </div>
		<!--</div>-->
		     
	
		</div>
		
			<!--动画开始考过来的-->
		
		<div id="fkdh">
			<!--img[src=inages/$.jpg]*6-->
			<img src="img/1.jpg" style="display: block;" />
			<img src="img/2.jpg" alt="" />
			<img src="img/3.jpg" alt="" />
			<img src="img/4.jpg" alt="" />
			<!--<img src="inages/5.jpg" alt="" />
			<img src="inages/6.jpg" alt="" />-->
			<ul>
				<li style="background: #A10000;"></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
		<!--动画结束-->   
		
		
		
		<!--flash女装结束-->
			<div class="right">
			    <img src="youshan.jpg"/>
		        <img src="youxia.jpg"/>
			</div>
	</div>		
			
	<div id="xt">
	    <img src="xt1.jpg" alt="" class="xt1"/>
	    <img src="xt2.jpg" alt="" class="xt2"/>
	    <img src="xt3.jpg" alt="" class="xt3"/>
	    <img src="xt4.jpg" alt="" class="xt4"/>
	    <img src="xt5.jpg" alt="" class="xt5"/>
	    <img src="xt6.jpg" alt="" class="xt6"/>
	    <img src="xt7.jpg" alt="" class="xt7"/>
	    <img src="xt8.jpg" alt="" class="xt8"/>
	    <img src="xt9.jpg" alt="" class="xt1"/>
	    <img src="xt10.jpg" alt="" class="xt2"/>
	    <img src="xt1.jpg" alt="" class="xt3"/>
	    <img src="xt1.jpg" alt="" class="xt4"/>
	    <img src="xt1.jpg" alt="" class="xt5"/>
	    <img src="xt1.jpg" alt="" class="xt6"/>
	    <img src="xt1.jpg" alt="" class="xt7"/>
	    <!--<img src="xt1.jpg" alt="" class="xt8"/>-->
	</div>
	<!--搜索区域-->
    <!--下面文字开始-->
	<div id='xiamian'>
		<ul>
			<li class="xil">
				<p>关于凡客</p>
				<ul>
				<li>公司简介</li>
				<li>联系我们</li>
				<li>友情链接</li>
			
				</ul>
			</li>
			
			<li class="xil">
				<p>新手指南</p>
				<ul>
					<li>账户注册</li>
					<li>购物流程</li>
					<li>网站地图</li>
					
				</ul>
			</li>
			
	
			<li class="xil">
				<p>配送范围及时间</p>
				<ul>
					<li>国内配送</li>
					<li>订单拆分</li>
					
				</ul>
			</li>
			<li class="xil">


				<p>支付方式</p>
				<ul>
					<li>货到付款</li>
					<li>在线支付</li>
					<li>礼品卡及账户余额</li>
					<li>其他支付方式</li>
				</ul>

			</li>
			<li class="xil">
				<p>售后服务</p>
				<ul>
					<li>退换货政策</li>
					<li>退换货办理流程</li>
					<li>退换货网上办理</li>
					<li>退款说明</li>
				</ul>
			</li>
			<li class="xil">
				<p>帮助中心</p>
				<ul>
					<li>在线客服</li>
					<li>找回密码</li>
					<li>隐私声明</li>
				</ul>
			</li>
			
		</ul>
	</div>
	<div id="tpjl">
		<div class="li l1"></div>
		<div class="li l2"></div>
		<div class="li l3"></div>
		<div class="li l4"></div>
	</div>
	<!--两面文字结束-->
	<!--这是赵永军的作业，其他人等不能复制，维权必究。2015年12月30日星期二-->
	
	<div class="xian">
		
		<img src="" alt="" />
	</div>
	<div id="xzz">
		<p>Copyright 2007 - 2015 vancl.com All Rights Reserved 京ICP证100557号 京公网安备11011502002400号 出版物经营许可证新出发京批字第直110138号</p>
	</div>
    <div id='xiaotudiv'>
		<div class="xiaotu x1"></div>
		<div class="xiaotu x2"></div>
		<div class="xiaotu x3"></div>
		<div class="xiaotu x4" >
			<img src="img/333.png" alt="" />
		</div>
	</div>
	</body>
</html>
